<template>
    <el-form class="hotel_search_bar">
        <el-form-item>
            <el-autocomplete
                v-model="cityName"
                :trigger-on-focus="false"
                :fetch-suggestions="querySearchAsync"
                placeholder="切换城市"
                @select="handleSelect"
            ></el-autocomplete>
        </el-form-item>
        <el-form-item>
            <el-date-picker
                v-model="timeList"
                type="daterange"
                range-separator="-"
                start-placeholder="入住日期"
                end-placeholder="离店日期"
                :picker-options="PickerOptions"
                value-format="yyyy-MM-dd"
            ></el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-popover placement="bottom-start" width="330" ref="popover">
                <div class="hotel_search_bar_person">
                    <span>每间</span>
                    <div>
                        <el-select size="mini" v-model="adult" @change="adultChange">
                            <el-option
                                v-for="(item, index) in 7"
                                :key="index"
                                :label="item"
                                :value="item"
                            ></el-option>
                        </el-select>
                        <el-select size="mini" v-model="child" @change="childChange">
                            <el-option
                                v-for="(item, index) in 4"
                                :key="index"
                                :label="index"
                                :value="index"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
                <div style="text-align: right; margin: 0">
                    <el-button type="primary" size="mini" @click="handleClick">确定</el-button>
                </div>
                <el-input
                    placeholder="人数未定"
                    suffix-icon="el-icon-user"
                    v-model="person"
                    slot="reference"
                >></el-input>
            </el-popover>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="catPrice">查看价格</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
import dayjs from "dayjs"; // ES 2015
export default {
    data() {
        return {
            // 成人
            adult: "2成人",
            child: "0儿童",
            cityName: "",
            // 时间数组
            timeList: "",
            // 人数
            person: "",
            form: {
                // 城市id
                city: "",
            },
            PickerOptions: {
                disabledDate(date) {
                    return dayjs(date).isBefore(
                        dayjs(new Date() - 24 * 1000 * 60 * 60)
                    );
                },
            },
        };
    },

    methods: {
        async querySearchAsync(querystr, cb) {
            let res = await this.$axios.get("/cities?name=" + querystr);
            const list = res.data.data.map((v) => ({ ...v, value: v.name }));
            cb(list);
        },
        handleSelect(val) {
            this.$router.push("/hotel?cityName=" + val.value);
        },
        adultChange(val) {
            this.adult = val + "成人";
        },
        childChange(val) {
            this.child = val + "儿童";
        },
        handleClick() {
            this.person = this.adult + " " + this.child;
            this.$refs.popover.doClose();
        },
        catPrice() {
            this.$router.push("/hotel?cityName=" + this.cityName);
        },
    },
};
</script>

<style lang="less" scoped>
.hotel_search_bar {
    display: flex;
    .el-form-item {
        margin-right: 10px;
    }
}
.hotel_search_bar_person {
    padding-bottom: 20px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
        width: 150px;
    }
    div {
        flex: 1;
        display: flex;
        .el-select {
            width: 100px;
            margin-left: 10px;
        }
    }
}
</style>
